<template>
  <div class="notification-view">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <el-skeleton :rows="3" animated />
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="error-state">
      <el-empty>
        <template #image>
          <img src="/004.png" style="width: 180px" />
        </template>
        <template #description>
          <p>{{ error }}</p>
        </template>
        <el-button type="primary" @click="fetchNotifications">重新加载</el-button>
      </el-empty>
    </div>

    <!-- 成功状态 -->
    <template v-else>
      <!-- 通知标签页 -->
      <div class="notification-tabs">
        <div class="tabs-container">
          <div 
            v-for="tab in tabs" 
            :key="tab.key"
            class="tab-item"
            :class="{ active: activeTab === tab.key }"
            @click="setActiveTab(tab.key)"
          >
            {{ tab.name }}
          </div>
        </div>
      </div>
    
    <!-- 通知列表 -->
    <div class="notification-list">
      <div 
        v-for="notification in filteredNotifications" 
        :key="notification.id"
        class="notification-item"
      >
        <div class="notification-avatar">
          <img :src="notification.user?.avatar || '/001.png'" :alt="notification.user?.nickname" />
        </div>
        
        <div class="notification-content">
          <div class="notification-header">
            <span class="username">{{ notification.user?.nickname || notification.user?.username }}</span>
            <span class="action-text">{{ getActionText(notification.type, notification.action) }}</span>
            <span class="time">{{ formatTime(notification.createTime) }}</span>
          </div>
          
          <div class="notification-body">
            <p class="comment-text" v-if="notification.content">{{ notification.content }}</p>
            <p class="deleted-text" v-else-if="notification.isDeleted">原评论已删除</p>
          </div>
          
          <div class="notification-actions" v-if="notification.type === 'comment'">
            <el-button size="small" type="text" class="reply-btn">回复</el-button>
            <el-button size="small" type="text" class="like-btn">
              <el-icon><CircleCheckFilled /></el-icon>
            </el-button>
          </div>
        </div>
        
        <div class="notification-thumbnail" v-if="notification.post">
          <img :src="notification.post.coverImage || notification.post.images?.[0]" :alt="notification.post.title" />
        </div>
      </div>
      
      <!-- 空状态 -->
      <div v-if="filteredNotifications.length === 0" class="empty-state">
        <el-empty>
          <template #image>
            <img src="/003.png" style="width: 180px" />
          </template>
          <template #description>
            <p>暂无{{ getActiveTabName() }}通知</p>
          </template>
        </el-empty>
      </div>
    </div>
    <!-- End of 通知列表 -->
    </template>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useNotificationStore } from '@/store/notification'
import { CircleCheckFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const notificationStore = useNotificationStore()

// 定义通知类型标签页
const tabs = ref([
  { key: 'comments', name: '评论' },
  { key: 'likes', name: '赞和收藏' },
  { key: 'follows', name: '新增关注' }
])

const loading = ref(true)
const error = ref(null)
const activeTab = ref('comments')
const notifications = ref([])

// 根据标签页筛选通知
const filteredNotifications = computed(() => {
  return notifications.value.filter(n => {
    if (activeTab.value === 'comments') return n.type === 'comment'
    if (activeTab.value === 'likes') return n.type === 'like'
    if (activeTab.value === 'follows') return n.type === 'follow'
    return false
  })
})

// 获取当前标签页名称
const getActiveTabName = () => {
  const tab = tabs.value.find(t => t.key === activeTab.value)
  return tab ? tab.name : ''
}

// 设置活动标签页
const setActiveTab = (tabKey) => {
  activeTab.value = tabKey
}

// 获取操作文本
const getActionText = (type, action) => {
  if (type === 'comment') {
    if (action === 'reply') return '回复了你的评论'
    if (action === 'comment') return '评论了你的笔记'
  } else if (type === 'like') {
    return '点赞了你的笔记'
  } else if (type === 'follow') {
    return '关注了你'
  }
  return ''
}

// 格式化时间
const formatTime = (timeStr) => {
  const date = new Date(timeStr)
  const now = new Date()
  const diff = now - date
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (days === 0) return '今天'
  if (days === 1) return '昨天'
  if (days < 7) return `${days}天前`
  
  return `${date.getMonth() + 1}-${date.getDate()}`
}

// 获取通知数据
const fetchNotifications = async () => {
  loading.value = true
  error.value = null
  
  try {
    const response = await notificationStore.fetchNotifications()
    notifications.value = response.data || []
  } catch (err) {
    error.value = err.response?.data?.message || '加载失败，请稍后重试'
    ElMessage.error(error.value)
  } finally {
    loading.value = false
  }
}

// 组件挂载时获取通知数据
onMounted(() => {
  fetchNotifications()
})
</script>

<style lang="scss" scoped>
@use '@/assets/styles/notification-actions';
.notification-view {
  .notification-tabs {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    
    .tabs-container {
      display: flex;
      gap: 40px;
      
      .tab-item {
        padding: 8px 0;
        cursor: pointer;
        font-size: 16px;
        color: #666;
        position: relative;
        transition: all 0.2s ease;
        
        &:hover {
          color: #333;
        }
        
        &.active {
          color: #333;
          font-weight: 600;
          
          &::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #ff2442;
            border-radius: 1px;
          }
        }
      }
    }
  }
  
  .notification-list {
    .notification-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      background: white;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: all 0.2s ease;
      
      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      
      .notification-avatar {
        flex-shrink: 0;
        
        img {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          object-fit: cover;
        }
      }
      
      .notification-content {
        flex: 1;
        min-width: 0;
        
        .notification-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 8px;
          
          .username {
            font-weight: 600;
            color: #333;
            font-size: 14px;
          }
          
          .action-text {
            color: #666;
            font-size: 14px;
          }
          
          .time {
            color: #999;
            font-size: 12px;
            margin-left: auto;
          }
        }
        
        .notification-body {
          margin-bottom: 12px;
          
          .comment-text {
            color: #333;
            font-size: 14px;
            line-height: 1.5;
            margin: 0;
          }
          
          .deleted-text {
            color: #999;
            font-size: 14px;
            font-style: italic;
            margin: 0;
          }
        }
        
        .notification-actions {
          display: flex;
          gap: 16px;
          
          .reply-btn {
            color: #666;
            padding: 0;
            
            &:hover {
              color: #ff2442;
            }
          }
          
          .like-btn {
            color: #666;
            padding: 0;
            
            &:hover {
              color: #ff2442;
            }
          }
        }
      }
      
      .notification-thumbnail {
        flex-shrink: 0;
        
        img {
          width: 80px;
          height: 80px;
          border-radius: 8px;
          object-fit: cover;
        }
      }
    }
    
    .empty-state {
      padding: 60px 20px;
      text-align: center;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .notification-view {
    .notification-tabs {
      .tabs-container {
        gap: 24px;
        
        .tab-item {
          font-size: 14px;
        }
      }
    }
    
    .notification-list {
      .notification-item {
        padding: 16px;
        
        .notification-avatar img {
          width: 40px;
          height: 40px;
        }
        
        .notification-thumbnail img {
          width: 60px;
          height: 60px;
        }
      }
    }
  }
}
</style>